<div class="category">
  <!-- 按钮 -->
  <div class="btns" style="margin-bottom: 10px;">
    <button id="btn_add" type="button" class="btn btn-primary">新增</button>
    <button id="btn_batchDel" type="button" class="btn btn-danger">批量删除</button>
  </div>
  <!-- 表格 -->
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col"><input type="checkbox"></th>
        <th scope="col">栏目名称</th>
        <th scope="col">栏目描述</th>
        <th scope="col">父栏目ID</th>
        <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <!-- 模态框 -->
  <div class="modal" tabindex="-1" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal_title"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <input type="text" id="form_id" style="display: none;">
            <div class="form-group">
              <label for="form_name">栏目名称</label>
              <input type="text" class="form-control" id="form_name" aria-describedby="emailHelp">
            </div>
            <div class="form-group">
              <label for="form_parentId">所属栏目</label>
              <select class="form-control" id="form_parentId">

              </select>
            </div>
            <div class="form-group">
              <label for="form_description">描述信息</label>
              <textarea class="form-control" id="form_description" rows="3"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="btn_sava">保存</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  var token = localStorage.getItem('token');
  // 将接口的基路径封装成全局变量
  var baseUrl = 'http://127.0.0.1:7788';
  // 全局配置ajax请求头信息
  $.ajaxSetup({
    headers: {
      'Authorization': token
    },
  })
  findAllCategories();  // 查询所有栏目信息

  // 1.查询所有栏目信息
  function findAllCategories() {
    // ajax交互
    $.ajax({
      url: baseUrl + '/category/findAll',
      method: 'GET',
      success: function (res) {
        // dom节点生成前，先清空tbody
        $('tbody').empty();
        res.data.forEach(function (item) {
          $(`
            <tr>
              <td><input type="checkbox" value="`+ item.id + `"></td>
              <td id="table_name">`+ item.name + `</td>
              <td id="table_description">`+ item.description + `</td>
              <td id="table_parentId">`+ item.parentId + `</td>
              <td>
                <i class="iconfont icon-shanchu" id="btn_del"></i>
                <i class="iconfont icon-xiugai" id="btn_edit"></i>
              </td>
            </tr>
          `).appendTo($('tbody'));
        });
        

        // 将所有parentId为null的数据筛选出来
        var parents = res.data.filter(function (item) {
          return item.parentId === null
        })
        // 将筛选出来的一级栏目插入到表单的下拉框列表中
        parents.forEach(function (item) {
          $(`
            <option value="`+ item.id + `">` + item.name + `</option>
          `).appendTo($('#form_parentId'))
        })
      }
    })
  }
  // 2.点击新增按钮事件
  $('#btn_add').click(function () {
    // 打开新增模态框之前，置空表单
    $('#form_id').val(null);
    $('#form_name').val(null);
    $('#form_parentId').val(null);
    $('#form_description').val(null);
    // 配置模态框的title
    $('#modal_title').text('新增栏目信息');
    $('#myModal').modal('show');
  })
  // 3.点击保存按钮，获取数据，与后台接口进行交互
  $('#btn_sava').click(function () {
    // 1) 获取表单数据
    var id = $('#form_id').val();
    var name = $('#form_name').val();
    var parentId = $('#form_parentId').val();
    var description = $('#form_description').val();
    var data;
    // 2) 判断name是否为空
    if (name) {
      // 判断id是否为空
      if (id) {
        data = {
          id,
          name,
          parentId,
          description
        }
      } else {
        data = {
          name,
          parentId,
          description
        }
      }
      $.ajax({
        url: baseUrl + '/category/saveOrUpdate',
        method: 'POST',
        data: data,
        success: function (res) {
          findAllCategories();           // 数据重载
          $('#myModal').modal('hide');   // 关闭模态框
          alert(res.message);            // 提示成功信息
        }
      })
    }
  })
  // 4.删除数据
  $('tbody').on('click', 'i', function () {
    switch ($(this)[0].id) {
      case 'btn_del':
        // 询问用户是否确认删除
        var result = confirm('是否确认删除？');
        if (result) {
          // 1.获取当前行数据的id
          var id = $(this).closest('tr').find('input[type=checkbox]').val();
          // 2.ajax交互
          $.ajax({
            url: baseUrl + '/category/deleteById',
            method: 'GET',
            data: { id: id },
            success: function (res) {
              findAllCategories()  // 重载数据
              alert(res.message);  // 提示删除的成功信息
            }
          })
        }
        break;
      case 'btn_edit':
        // 1.获取当前行信息
        var id = $(this).closest('tr').find('input[type=checkbox]').val();
        var name = $(this).closest('tr').find('#table_name').text();
        var parentId = $(this).closest('tr').find('#table_parentId').text();
        var description = $(this).closest('tr').find('#table_description').text();
        // 2.将当前行信息插入到表单的输入框中
        $('#form_id').val(id);
        $('#form_name').val(name);
        $('#form_parentId').val(parentId);
        $('#form_description').val(description);
        // 3.打开模态框
        $('#modal_title').text('修改栏目信息');
        $('#myModal').modal('show');
    }
  })
  // 5.批量删除
  $('#btn_batchDel').click(function () {
    var ids = $('input:checked').toArray().map(function (item) {
      return item.value
    })
    if (ids.length > 0) {
      $.ajax({
        url: baseUrl + '/category/batchDelete',
        method: 'POST',
        data: { ids: ids.toString() },
        success: function (res) {
          findAllCategories();  // 重载数据
          alert(res.message);   // 提示成功信息
        }
      })
    } else {
      alert('请先勾选数据!')
    }
  })
</script>